<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word to Markdown Converter</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">Word to Markdown Converter</h2>
        <form id="upload-form" enctype="multipart/form-data">
            <div class="form-group">
                <label for="word-file">Choose Word file:</label>
                <input type="file" class="form-control-file" id="word-file" name="word-file" accept=".doc,.docx" required>
            </div>
            <button type="submit" class="btn btn-primary">Upload and Convert</button>
        </form>

        <div id="download-section" class="mt-4" style="display: none;">
            <h4>Download Converted Files</h4>
            <button id="download-md" class="btn btn-success">Download Markdown</button>
            <button id="download-zip" class="btn btn-info">Download ZIP</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#upload-form').on('submit', function(event) {
                event.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#download-section').show();
                        $('#download-md').attr('data-filepath', response.markdown_file);
                        $('#download-zip').attr('data-filepath', response.zip_file);
                    },
                    error: function() {
                        alert('An error occurred while uploading the file.');
                    }
                });
            });

            $('#download-md').on('click', function() {
                var filepath = $(this).attr('data-filepath');
                if(filepath) {
                    window.location.href = '/download?file=' + encodeURIComponent(filepath);
                }
            });

            $('#download-zip').on('click', function() {
                var filepath = $(this).attr('data-filepath');
                if(filepath) {
                    window.location.href = '/download?file=' + encodeURIComponent(filepath);
                }
            });
        });
    </script>
</body>
</html>
